<template>
    <div style="text-align: center; font-size: x-large;">
            <h1>Button 按钮</h1>
    </div>

    <div style="padding: 10px;">

        <el-card style="max-width: 100%;">
            <template #header>
                <div class="card-header">
                    <span>普通按钮(实心)</span>
                </div>
            </template>
            <p>
                <el-button>Default</el-button>
                <el-button type="primary">Primary</el-button>
                <el-button type="success">Success</el-button>
                <el-button type="info">Info</el-button>
                <el-button type="warning">Warning</el-button>
                <el-button type="danger">Danger</el-button>
            </p>
        </el-card>

        <el-divider>
            <el-icon><star-filled /></el-icon>
        </el-divider>

        <el-card style="max-width: 100%;">
            <template #header>
                <div class="card-header">
                    <span>普通按钮(空心)</span>
                </div>
            </template>
            <p>
                <el-button plain>Plain</el-button>
                <el-button type="primary" plain>Primary</el-button>
                <el-button type="success" plain>Success</el-button>
                <el-button type="info" plain>Info</el-button>
                <el-button type="warning" plain>Warning</el-button>
                <el-button type="danger" plain>Danger</el-button>
            </p>
        </el-card>

        <el-divider>
            <el-icon><star-filled /></el-icon>
        </el-divider>

        <el-card style="max-width: 100%;">
            <template #header>
                <div class="card-header">
                    <span>普通按钮(圆角)</span>
                </div>
            </template>
            <p>
                <el-button round>Round</el-button>
                <el-button type="primary" round>Primary</el-button>
                <el-button type="success" round>Success</el-button>
                <el-button type="info" round>Info</el-button>
                <el-button type="warning" round>Warning</el-button>
                <el-button type="danger" round>Danger</el-button>
            </p>
        </el-card>

        <el-divider>
            <el-icon><star-filled /></el-icon>
        </el-divider>

        <el-card style="max-width: 100%;">
            <template #header>
                <div class="card-header">
                    <span>圆形按钮(圆形)</span>
                </div>
            </template>
            <p>
                <el-button circle>
                    <el-icon><component :is="`Search`" /></el-icon>
                </el-button>
                <el-button type="primary" circle>
                    <el-icon><component :is="`Edit`" /></el-icon>
                </el-button>
                <el-button type="success" circle>
                    <el-icon><component :is="`Check`" /></el-icon>
                </el-button>
                <el-button type="info" circle>
                    <el-icon><component :is="`Message`" /></el-icon>
                </el-button>
                <el-button type="warning" circle>
                    <el-icon><component :is="`Star`" /></el-icon>
                </el-button>
                <el-button type="danger" circle>
                    <el-icon><component :is="`Delete`" /></el-icon>
                </el-button>
            </p>
        </el-card>

        <el-divider>
            <el-icon><star-filled /></el-icon>
        </el-divider>

        <el-card style="max-width: 100%;">
            <template #header>
                <div class="card-header">
                    <span>普通按钮(禁用)</span>
                </div>
            </template>
            <p>
                <el-button disabled>Default</el-button>
                <el-button type="primary" disabled>Primary</el-button>
                <el-button type="success" disabled>Success</el-button>
                <el-button type="info" disabled>Info</el-button>
                <el-button type="warning" disabled>Warning</el-button>
                <el-button type="danger" disabled>Danger</el-button>
            </p>
        </el-card>

        <el-divider>
            <el-icon><star-filled /></el-icon>
        </el-divider>

        <el-card style="max-width: 100%;">
            <template #header>
                <div class="card-header">
                    <span>链接按钮(链接)</span>
                </div>
            </template>
            <p>
                <el-button link>Plain</el-button>
                <el-button type="primary" link>Primary</el-button>
                <el-button type="success" link>Success</el-button>
                <el-button type="info" link>Info</el-button>
                <el-button type="warning" link>Warning</el-button>
                <el-button type="danger" link>Danger</el-button>
            </p>
        </el-card>

        <el-divider>
            <el-icon><star-filled /></el-icon>
        </el-divider>

        <el-card style="max-width: 100%;">
            <template #header>
                <div class="card-header">
                    <span>文字按钮(文字)</span>
                </div>
            </template>
            <p>
                <el-button text>Plain</el-button>
                <el-button type="primary" text>Primary</el-button>
                <el-button type="success" text>Success</el-button>
                <el-button type="info" text>Info</el-button>
                <el-button type="warning" text>Warning</el-button>
                <el-button type="danger" text>Danger</el-button>
            </p>
        </el-card>

        <el-divider>
            <el-icon><star-filled /></el-icon>
        </el-divider>

        <el-card style="max-width: 100%;">
            <template #header>
                <div class="card-header">
                    <span>图标按钮(图标)</span>
                </div>
            </template>
            <p>
                <el-button>
                    <el-icon><component :is="`Search`" /></el-icon>
                </el-button>
                <el-button type="primary">
                    <el-icon><component :is="`Edit`" /></el-icon>编辑
                </el-button>
                <el-button type="success">
                    <el-icon><component :is="`Check`" /></el-icon>
                </el-button>
                <el-button type="info">
                    <el-icon><component :is="`Message`" /></el-icon>
                </el-button>
                <el-button type="warning">
                    收藏<el-icon><component :is="`Star`" /></el-icon>
                </el-button>
                <el-button type="danger">
                    <el-icon><component :is="`Delete`" /></el-icon>
                    删除
                </el-button>
            </p>
        </el-card>

        <el-divider>
            <el-icon><star-filled /></el-icon>
        </el-divider>

        <el-card style="max-width: 100%;">
            <template #header>
                <div class="card-header">
                    <span>按钮组(组)</span>
                </div>
            </template>
            <p>
                <el-button-group>
                    <el-button type="primary"><el-icon class="el-icon--right"><ArrowLeft /></el-icon>Previous Page</el-button>
                    <el-button type="primary">
                    Next Page<el-icon class="el-icon--right"><ArrowRight /></el-icon>
                    </el-button>
                </el-button-group>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <el-button-group class="ml-4">
                    <el-button type="warning"><el-icon><Edit /></el-icon></el-button>
                    <el-button type="danger"><el-icon><Share /></el-icon></el-button>
                    <el-button type="success"><el-icon><Delete /></el-icon></el-button>
                </el-button-group>
            </p>
        </el-card>

        <el-divider>
            <el-icon><star-filled /></el-icon>
        </el-divider>

        <el-card style="max-width: 100%;">
            <template #header>
                <div class="card-header">
                    <span>加载按钮(加载) - 未完成</span>
                </div>
            </template>
            <p>
                <el-button type="primary" loading>Loading</el-button>
                <el-button type="primary" loading>
                    <template #loading-icon="Edit"></template>
                    Loading</el-button>
                <el-button type="primary" loading>
                    <template #loading>
                    <div class="custom-loading">
                        <svg class="circular" viewBox="-10, -10, 50, 50">
                        <path
                            class="path"
                            d="
                            M 30 15
                            L 28 17
                            M 25.61 25.61
                            A 15 15, 0, 0, 1, 15 30
                            A 15 15, 0, 1, 1, 27.99 7.5
                            L 15 15
                        "
                            style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
                        />
                        </svg>
                    </div>
                    </template>
                    Loading
                </el-button>
            </p>
        </el-card>

    </div>
</template>

<script>
export default {
    setup () {
        

        return {}
    }
}
</script>

<style lang="scss" scoped>

</style>